.verticalTabMenuWrap {
  display: flex;
  overflow: hidden;
  &.left {
    flex-direction: row;
    .verticalTabMenuList {
      border-right: 1px solid #f0f0f0;
    }
  }
  &.right {
    flex-direction: row-reverse;
    .verticalTabMenuList {
      border-left: 1px solid #f0f0f0;
    }
  }
  &.bottom {
    flex-direction: column-reverse;
    .verticalTabMenuList {
      border-top: 1px solid #f0f0f0;
      .verticalTabMenuListItem {
        width: auto;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .verticalTabMenuList {
    .verticalTabMenuListItem {
      padding: 10px;
      width: 34px;
      white-space: normal;
      word-break: break-all;
      overflow: hidden;
      text-align: center;
      font-size: 14px;
      transition: all 0.2s;
      cursor: pointer;
      &.disabled {
        cursor: not-allowed;
        pointer-events: none;
        color: #999;
      }
      &:hover {
        background-color: #e5e5e5;
      }
      &.active,
      &:active {
        background-color: #aeaeae;
      }
    }
  }
  .verticalTabContainer {
    &.hidden {
      display: none;
    }
  }
}
